<template>
  <!-- <link>ad</link> -->
  <div class="app-container">
    <el-row>
      <el-col :span="8">
        <!-- 基础柱状图 -->
        <div style="width: 600px;height:400px;background-color: white;" ref="chart1"></div>
      </el-col>
      <el-col :span=8>
        <!-- 基础折线图 平滑曲线图-->
        <div style="width: 600px;height:400px;background-color: white;" ref="chart2"></div>
      </el-col>
      <el-col :span=8>
        <!-- 圆环饼图 -->
        <div style="width: 600px;height:400px;background-color: white;" ref="chart3"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span=24>
        <!-- 动态排序柱状图 -->
        <div style="width: 600px;height:400px;background-color: white;" ref="dynamicChart"></div>
      </el-col>
    </el-row>
    <!-- <el-button icon="el-icon-document" type="primary" round=true link="true" @click="showLock"> 跳转文档</el-button> -->

    <!-- 散点图 -->
    <!-- <div id="main" style="width: 600px;height:400px;background-color: white;" ref="chart1"></div> -->
    <div>
      <!-- <input ref="inputRef" type="text">
      <button @click="focusInput">点击获取圆环饼图</button> -->
      <el-button @click="getRingChart">点击获取圆环饼图</el-button>
      <el-button @click="getDynamicChart">点击获取动态排序柱状图</el-button>
      <!-- <el-button @click="modifyDynamicData">修改数据：动态排序柱状图</el-button> -->
    </div>
  </div>
</template>

<script>
import { getDynamicChartData } from "@/api/zone/echarts";
import * as echarts from 'echarts';

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
// import * as echarts from 'echarts/core';
// // 引入柱状图图表，图表后缀都为 Chart
// import { BarChart } from 'echarts/charts';
// // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
// import {
//   TitleComponent,
//   TooltipComponent,
//   GridComponent,
//   DatasetComponent,
//   TransformComponent
// } from 'echarts/components';
// // 标签自动布局、全局过渡动画等特性
// import { LabelLayout, UniversalTransition } from 'echarts/features';
// // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
// import { CanvasRenderer } from 'echarts/renderers';

// // 注册必须的组件
// echarts.use([
//   TitleComponent,
//   TooltipComponent,
//   GridComponent,
//   DatasetComponent,
//   TransformComponent,
//   BarChart,
//   LabelLayout,
//   UniversalTransition,
//   CanvasRenderer
// ]);

//上总结 进门渲染用钩子 后续渲染用按钮
export default {
  name: "echarts",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        noticeTitle: undefined,
        createBy: undefined,
        status: undefined
      },
      // 表单参数
      form: {},
      option: {
        title: {
          text: 'ECharts 示例'
        },
        tooltip: {},
        legend: {
          data: ['销量', '进货量']
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "云梦"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '进货量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 28]
        }
        ]
      },
      dynamicOption: {
        xAxis: {
          max: 'dataMax'
        },
        yAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E'],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 2 // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: 'X',
            type: 'bar',
            data: [1200, 1100, 30, 15, 10],
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            }
          }
        ],
        legend: {
          show: true
        },
        animationDuration: 3000,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }
    };
  },
  mounted() {
    // 初始化图表
    var myChart = echarts.init(this.$refs.chart1);
    echarts.init(this.$refs.dynamicChart);
    //var myChart2 = echarts.init(this.$refs.chart2);
    //var myChart3 = echarts.init(this.$refs.chart3);
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(this.option);
    //myChart2.setOption(this.option);
    //myChart3.setOption(this.option);

  },
  created() {
    //this.createCharts();
    //this.getLineChart();
    //this.getRingChart();

  },
  methods: {
    /** 查询展示锁这篇文档 */
    showLock() {
      window.open("/lqq/profile/pdf/设计模式之禅.pdf");
    },
    focusInput() {
      // 使用 this.$refs 访问被 ref 标记的元素
      // this.$refs.inputRef.focus();
    },
    getRingChart() {
      var option = {
        title: {
          text: '圆环图的例子',
          left: 'center',
          top: 'center'
        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 335,
                name: 'A'
              },
              {
                value: 234,
                name: 'B'
              },
              {
                value: 1548,
                name: 'C'
              }
            ],
            radius: ['40%', '70%']
          }
        ]
      };
      echarts.init(this.$refs.chart3).setOption(option);
      this.getLineChart();

    },
    getLineChart() {
      //创建折线图
      var option = {
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150],
            type: 'line'
          }
        ]
      };
      echarts.init(this.$refs.chart2).setOption(option);
    },
    getDynamicChart() {
      // for (let i = 0; i < 5; ++i) {
      //   data.push(Math.round(Math.random() * 200));
      // }
      //this.dynamicOption.series[0].data = data;
      // for (var i = 0; i < data.length; ++i) {
      //   if (Math.random() > 0.9) {
      //     data[i] += Math.round(Math.random() * 2000);
      //   } else {
      //     data[i] += Math.round(Math.random() * 200);
      //   }
      // }

      this.dynamicOption.series[0].data[3] += 1000;
      echarts.getInstanceByDom(this.$refs.dynamicChart).setOption(this.dynamicOption);
    },
    // modifyDynamicData() {
    //   //for (let i = 0; i < 5; i++) {//会失效，因为前端是异步的 要在settimeout里++ 或者用let代替var（实测没用）
    //     this.getDynamicChart();


    // },
    // newChart() {//获取实例
    //   var myChart = echarts.getInstanceByDom(this.$refs.dynamicChart);
    //   if (myChart == null) {
    //     myChart = echarts.init(this.$refs.dynamicChart);
    //   }
    //   return myChart
    // },
    //根据ref创建不同的图
    createDynamicCharts(option) {

    }
  }
};
</script>
